<div data-ng-class="fluidHeaderLayout ? 'container-fluid' : 'container'">
  <div class="navbar-header">
    <a class="hidden-sm hidden-md hidden-lg pull-left gn-logo-link" data-gn-active-tb-item="{{gnCfg.mods.home.appUrl}}" data-ng-hide="{{gnCfg.mods.header.isLogoInHeader}}">
      <img class="gn-logo"
           alt="{{'siteLogo' | translate}}"
           data-ng-src="{{gnUrl}}../images/logos/{{info['node/id'] || info['system/site/siteId']}}.png?random{{info['system/site/lastUpdate']}}"/>
    </a>
    <a class="hidden-sm hidden-md hidden-lg btn btn-link pull-left"
       data-gn-active-tb-item="{{gnCfg.mods.home.appUrl}}">
      <span class="gn-name"
            data-ng-class="authenticated && user.isEditorOrMore() ? 'gn-truncate' : ''"
            title="{{info['system/site/name']}}">{{info['node/name'] || info['system/site/name']}}</span>
    </a>
    <button type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#navbar"
            title="{{'toggleNavigation' | translate}}"
            aria-expanded="false"
            aria-controls="navbar">
      <span class="sr-only" data-translate>toggleNavigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div id="navbar" class="navbar-accessible navbar-collapse collapse">
    <ul class="nav navbar-nav gn-menu-xs" role="menu">
      <li class="clearfix hidden-xs" data-ng-if="gnCfg.mods.home.enabled">
        <a class="pull-left gn-logo-link" 
           data-gn-active-tb-item="{{gnCfg.mods.home.appUrl}}">
          <img class="gn-logo"
               data-ng-hide="{{gnCfg.mods.header.isLogoInHeader}}"
               alt="{{'siteLogo' | translate}}"
               data-ng-src="{{gnUrl}}../images/logos/{{info['node/id'] || info['system/site/siteId']}}.png?random{{info['system/site/lastUpdate']}}"/>
          <span class="gn-name gn-margin-left hidden-sm"
                data-ng-if="gnCfg.mods.header.showGNName"
                data-ng-class="authenticated && user.isEditorOrMore() ? 'gn-truncate' : ''"
                title="{{info['node/name'] || info['system/site/name']}}">
            {{info['node/name'].split('|')[0] || info['system/site/name']}}
          </span>
        </a>
      </li>
      <li class="gn-menuitem-xs" data-ng-if="gnCfg.mods.search.enabled">
        <a data-gn-active-tb-item="{{gnCfg.mods.search.appUrl}}"
          title="{{'search' | translate}}">
          <span class="fa fa-fw fa-search hidden-sm"></span>
          <span translate>search</span>
        </a>
      </li>
      <li class="gn-menuitem-xs" data-ng-if="gnCfg.mods.map.enabled">
        <a data-gn-active-tb-item="{{isExternalViewerEnabled ? externalViewerUrl : gnCfg.mods.map.appUrl}}"
          title="{{'map' | translate}}">
          <span class="fa fa-fw fa-globe hidden-sm"></span>
          <span translate>makeYourMap</span>
          <span data-gnv-layer-indicator=""/>
        </a>
      </li>
      <li class="dropdown gn-clear-xs" data-ng-if="gnCfg.mods.editor.enabled"
          data-ng-show="authenticated && user.isEditorOrMore()"
          id="gn-login-dropdown">
        <a title="{{'editorBoard' | translate}}"
           href
           class="dropdown-toggle gn-menuheader-xs"
           role="button"
           data-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
          <span class="fa fa-fw fa-pencil hidden-xs"></span>
          <span translate>contribute</span>
          <span class="caret hidden-xs"></span>
        </a>
        <ul class="dropdown-menu gn-menu-xs clearfix" role="menu">
          <li class="gn-menuitem-xs" role="menuitem">
            <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/board">
              <span class="fa fa-fw fa-bars"></span><span translate>editorHome</span>
            </a>
          </li>
          <li role="separator" class="divider gn-separator-xs"></li>
          <li class="gn-menuitem-xs" role="menuitem">
            <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/create">
              <span class="fa fa-fw fa-plus"></span>&nbsp;<span translate>addRecord</span>
            </a>
          </li>
          <li class="gn-menuitem-xs" role="menuitem">
            <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/import">
              <span class="fa fa-fw fa-upload"></span><span translate>ImportRecord</span>
            </a>
          </li>
          <li class="gn-menuitem-xs" role="menuitem">
            <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/directory">
              <span class="fa fa-fw fa-bookmark"></span><span translate>directoryManager</span>
            </a>
          </li>
          <li class="gn-menuitem-xs" role="menuitem">
            <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/batchedit">
              <span class="fa fa-fw fa-pencil"></span><span translate>batchEditing</span>
            </a>
          </li>
          <li class="gn-menuitem-xs" role="menuitem" ng-if="user.isAdministratorOrMore() && healthCheck.IndexHealthCheck === true">
            <a data-gn-active-tb-item="{{gnCfg.mods.editor.appUrl}}#/accessManager">
              <span class="fa fa-fw fa-lock"/><span data-translate="">accessManager</span>
            </a>
          </li>
        </ul>
      </li>
      <li class="dropdown" data-ng-show="user.isUserAdminOrMore()">
        <a title="{{'adminConsole' | translate}}"
           href
           class="dropdown-toggle gn-menuheader-xs"
           role="button"
           data-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
          <span class="fa fa-fw fa-wrench hidden-xs"></span>
          <span translate>adminConsole</span>
          <span class="caret hidden-xs"></span>
        </a>
        <ul data-ng-if="user.isUserAdmin()" class="dropdown-menu gn-menu-xs" role="menu">
          <li class="gn-menuitem-xs" role="menuitem">
            <a data-gn-active-tb-item="admin.console#/home">
              <span class="fa fa-fw fa-th"></span><span translate>adminHome</span>
            </a>
          </li>
          <li role="separator" class="divider gn-separator-xs"></li>
          <li class="gn-menuitem-xs" role="menuitem" data-ng-repeat="t in userAdminMenu">
            <a data-gn-active-tb-item="admin.console{{t.route}}">
              <span class="fa fa-fw {{t.icon}}"></span><span translate>{{t.name | translate}}</span>
            </a>
          </li>
        </ul>
        <ul data-ng-if="user.isAdministrator()" class="dropdown-menu gn-menu-xs" role="menu">
          <li class="gn-menuitem-xs" role="menuitem">
            <a data-gn-active-tb-item="admin.console#/home">
              <span class="fa fa-fw fa-th"></span><span translate>adminHome</span>
            </a>
          </li>
          <li role="separator" class="divider gn-separator-xs"></li>
          <li class="gn-menuitem-xs" role="menuitem" data-ng-repeat="t in adminMenu">
            <a data-gn-active-tb-item="{{gnCfg.mods.admin.appUrl}}{{t.route}}">
              <span class="fa fa-fw {{t.icon}}"></span><span translate>{{t.name | translate}}</span>
            </a>
          </li>
        </ul>
      </li>
      <li gn-static-pages-list-viewer data-section="top" data-language="{{lang}}" />
    </ul>

    <div class="navbar-right">
      <ul data-ng-if="gnCfg.mods.signin.enabled"
          class="nav navbar-nav username-dropdown">
        <!-- logged in -->
        <li class="dropdown" data-ng-show="authenticated">
          <a title="{{'userDetails' | translate}}"
             href
             class="dropdown-toggle gn-menuitem-xs"
             role="button"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false">
            <img class="img-circle"
              alt="{{'avatar' | translate}}"
              data-ng-src="../api/users/{{(user.id)}}.png?size=18"/>
            <div class="gn-user-info hidden-sm hidden-md">
              <span class="gn-user-name">{{user.name}} {{user.surname}}</span><br>
              <span class="gn-user-role">{{user.profile | translate}}</span>
            </div>
            <span class="caret"></span>
            <span class="alert alert-danger ng-hide"
                  data-ng-show="session.remainingTime > 0 &&
                      session.remainingTime < session.alertInTitleWhen"
                  translate
                  data-translate-values="{remainingTime: '{{session.remainingTime}}'}">
              sessionWillExpireIn
            </span>
          </a>
          <ul class="dropdown-menu gn-menuitem-xs" role="menu">
            <li class="text-center hidden-xs" role="menuitem">
              <img class="img-circle"
                  alt="{{'avatar' | translate}}"
                  data-ng-src="../api/users/{{(user.id)}}.png?size=56"/>
            </li>
            <li role="separator" class="divider hidden-xs"></li>
            <li class="dropdown-header hidden-xs" role="menuitem" translate>username</li>
            <li class="hidden-xs" role="menuitem">
              <a data-gn-active-tb-item="{{gnCfg.mods.admin.appUrl}}#/organization/users?userOrGroup={{user.username}}">{{user.name}} {{user.surname}}</a>
            </li>
            <li class="dropdown-header hidden-xs" role="menuitem" translate>profile</li>
            <li class="hidden-xs" role="menuitem">
              <a style="text-transform: lowercase" data-gn-active-tb-item="{{gnCfg.mods.admin.appUrl}}#/organization/users?userOrGroup={{user.username}}">{{user.profile | translate}}</a>
            </li>
            <li role="separator" class="divider hidden-xs"></li>
            <li role="menuitem">
              <a href="{{signoutUrl}}"
                title="{{'signout' | translate}}">
                <span class="fa fa-fw fa-sign-out"></span>
                {{'signout' | translate}}
              </a>
            </li>
          </ul>
        </li>
        <!-- not logged in -->
        <li class="dropdown signin-dropdown"
          data-ng-if="!authenticated && service !== 'catalog.signin' && service !== 'new.account' && (!shibbolethEnabled || (shibbolethEnabled && !shibbolethHideLogin))">
          <a href="{{gnCfg.mods.signin.appUrl | signInLink}}"
             title="{{'signIn'|translate}}"
             class="dropdown-toggle gn-menuheader-xs"
             data-ng-keypress="$event"
             data-toggle="dropdown"
             aria-haspopup="true"
             data-ng-mouseover="focusLoginPopup()">
            <span class="fa fa-fw fa-sign-in hidden-sm"></span>
            {{'signIn' | translate}}
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li role="menuitem">
              <form name="gnSigninForm" class="navbar-form flex-row"
                action="{{signInFormAction}}" method="post" role="form">
                <input type="hidden" name="_csrf" value="{{csrf}}"/>
                <div class="form-group form-group-sm">
                  <div class="input-group">
                    <span class="input-group-addon">
                      <span class="fa fa-fw fa-user"></span>
                    </span>
                    <input type="text"
                          class="form-control"
                          id="inputUsername"
                          name="username"
                          autofocus=""
                          aria-label="{{'username' | translate}}"
                          placeholder="{{'username' | translate}}"
                          data-ng-model="signinUsername"
                          required=""/>
                  </div>
                </div>
                <div class="flex-spacer hidden-xs"></div>
                <div class="form-group form-group-sm">
                  <div class="input-group">
                    <span class="input-group-addon">
                      <span class="fa fa-fw fa-lock"></span>
                    </span>
                    <input type="password"
                          class="form-control"
                          id="inputPassword"
                          name="password"
                          autocomplete="off"
                          data-ng-model="signinPassword"
                          aria-label="{{'password' | translate}}"
                          placeholder="{{'password' | translate}}"
                          required=""/>
                  </div>
                </div>
                <div class="flex-spacer hidden-xs"></div>

                <input type="hidden" name="redirectUrl" value="{{redirectUrlAfterSign}}"/>

                <button type="submit" class="btn btn-primary btn-sm pull-right"
                        aria-label="{{'signIn' | translate}}"
                        data-ng-disabled="!gnSigninForm.$valid">
                  <span class="fa fa-sign-in"></span>
                </button>
              </form>
            </li>
          </ul>
        </li>
      </ul>

      <form class="navbar-form language-switcher pull-right">
        <span class="gn-menuheader-xs visible-xs"
              data-ng-if="!authenticated && service !== 'catalog.signin' && service !== 'new.account' && (!shibbolethEnabled || (shibbolethEnabled && !shibbolethHideLogin))"
              data-translate="">language</span>
        <div class="form-group"
            data-gn-language-switcher="lang"
            data-langs="langs"
            data-lang-labels="langLabels">
        </div>
      </form>
    </div>
  </div>
</div>
